<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 采购分析">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="销售数量" value="528,779" />
      <KPICard label="到货及时率" value="61.38%" orange />
      <KPICard label="库存周转率" value="2.44" green />
      <KPICard label="库存覆盖天数" value="41.5" green />
      <KPICard label="库存总量" value="19,364" />
      <KPICard label="目标完成率" value="157.41%" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-performance">
      <ChartCard title="年月采购数量趋势对比分析" grid-area="a">
        <ECharts :option="procurementTrendOption" />
      </ChartCard>
      <ChartCard title="商品采购对比分析" grid-area="b">
        <ECharts :option="productProcurementOption" />
      </ChartCard>
      <ChartCard title="供应商采购数量与金额对比" grid-area="c">
        <ECharts :option="supplierProcurementOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const procurementTrendOption = ref({})
const productProcurementOption = ref({})
const supplierProcurementOption = ref({})

onMounted(() => {
  // 年月采购数量趋势对比分析
  procurementTrendOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['采购数量', '采购数量环比'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '采购数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '环比',
        min: -50,
        max: 50,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '采购数量',
        type: 'bar',
        data: [4500, 5075, 4201, 4437, 3560, 5222, 4732, 4058, 3751, 4460, 3903, 4095],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        }
      },
      {
        name: '采购数量环比',
        type: 'line',
        yAxisIndex: 1,
        data: [null, -17, -1, -20, 50, -22, -14, -10, 19, -13, 5, -7],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 商品采购对比分析
  productProcurementOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['采购数量', '采购金额同比'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '20%'
    },
    xAxis: {
      type: 'category',
      data: ['药品3', '药品2', '药品9', '药品7', '药品8', '药品10', '药品4', '药品1', '药品5', '药品6'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff', rotate: 45 }
    },
    yAxis: [
      {
        type: 'value',
        name: '采购数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '采购金额同比',
        min: 0,
        max: 10,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '采购数量',
        type: 'bar',
        data: [6137, 5834, 5739, 5168, 5162, 4911, 4804, 4563, 4533, 4486],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        }
      },
      {
        name: '采购金额同比',
        type: 'line',
        yAxisIndex: 1,
        data: [1.4, 5.8, 2.9, 5.8, 4.9, 4.8, 1.9, 1.9, 5.8, 7.08],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 供应商采购数量与金额对比
  supplierProcurementOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>金额: {c[0]}<br/>数量: {c[1]}'
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'value',
      name: '金额',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    series: [
      {
        type: 'scatter',
        data: [
          [25000, 450], [28000, 520], [32000, 580], [35000, 620], [38000, 680],
          [42000, 720], [45000, 780], [48000, 820], [52000, 880], [55000, 920],
          [58000, 950], [62000, 980], [45000, 750], [40000, 700], [50000, 850],
          [35000, 600], [48000, 800], [42000, 720], [55000, 900], [60000, 950]
        ],
        symbolSize: 12,
        itemStyle: {
          color: '#36cfc9',
          opacity: 0.8
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 10,
          formatter: (params) => {
            const suppliers = ['Supplier_1', 'Supplier_10', 'Supplier_84', 'Supplier_60', 'Supplier_100',
              'Supplier_66', 'Supplier_28', 'Supplier_95', 'Supplier_51', 'Supplier_82',
              'Supplier_39', 'Supplier_40', 'Supplier_31', 'Supplier_11', 'Supplier_53',
              'Supplier_20', 'Supplier_72', 'Supplier_34', 'Supplier_16', 'Supplier_10']
            return suppliers[params.dataIndex] || `Supplier_${params.dataIndex + 1}`
          }
        }
      }
    ]
  }
})
</script>

